body {
    font-size: .28rem !important;
    background: rgb(245,250,250);
}
/* 上-导航 */
.header{
    width: 100%;
    height: 1.48rem;
    background: rgb(255,198,0);
    /* 固定定位 */
    position: fixed;
    left: 0;
    top: 0;
    /* 弹性盒模型 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 利用字体样式自动继承特性 */
    color: #fff;
    font-size: .4rem;
    /* 层级关系 */
    z-index: 999;
}
.header i:nth-of-type(1){
    margin-left: .2rem;
    /* 分析：
        因为阿里巴巴矢量图标库会自动设置i的字体大小为16px
        因此需要手动覆盖 */
    font-size: inherit;/*手动继承父元素*/
}
.header i:nth-of-type(2){
    margin-right: .2rem;
    font-size: inherit;/*手动继承父元素*/
}

/* 图片 */
.header+img{
    width: 100%;
    margin-top: 1.48rem;
    height: 3.2rem;
}


/* 中-主要内容区 */
.main{
    height: auto;
    min-height: 6rem;/*前期测试预览效果*/
    /* border: 1px solid; */
    width: 7.1rem;
    margin: .2rem auto 1.6rem;
}
/* 上-选项操作区 */
.main>.title_tap{
    line-height: .8rem;
    /* background: lightblue; */
    /* 弹性盒模型 */
    display: flex;
    justify-content: center;
}
.main>.title_tap div{
    margin: 0 .2rem;
    color: #666;
}
/* 激活态 */
.main>.title_tap div.active{
    font-weight: bold;
    /* 相对定位 */
    position: relative;
    color: #000;
}
/* 激活态---下划线 */
.main>.title_tap div.active::after{
    content: "";
    display: block;
    width: 70%;
    height: .04rem;
    background: rgb(41,204,177);
    /* 绝对定位 */
    position: absolute;
    left: 15%;
    bottom: .12rem;
}

/* 下--内容展示区 */
.main>.info_tap{
    background: #fff;
}
/* 信息标题 */
.main>.info_tap>.info_tap_title{
    width: 100%;
    height: 1.8rem;
    /* 弹性盒模型 */
    display: flex;
    flex-wrap: wrap;
    /* 多行元素交叉轴居中 */
    align-content: center;
    /* 下边框 */
    border-bottom: 1px solid #e8e5e5;
}
/* 信息标题-上 */
.main>.info_tap>.info_tap_title>div:nth-of-type(1){
    margin-bottom: .12rem;
    /* 弹性盒模型 */
    display: flex;
    align-items: center;
}
.main .info_tap_title>div:nth-of-type(1) span:nth-of-type(1){
    background: rgb(255,198,0);
    padding: .12rem .2rem;
    color: #fff;
    border-radius: .06rem .3rem .3rem 0;
    /* 盒阴影 */
    box-shadow: .06rem .06rem .06rem rgba(0,0,0,.3);
    margin-right: .2rem;
}
.main .info_tap_title>div:nth-of-type(1) span:nth-of-type(2){
    font-size: .36rem;
    font-weight: bold;
}
/* 信息标题-下 */
.main .info_tap_title>div:nth-of-type(2){
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: .12rem;
    font-size: .26rem;
    color: #888;
    border-radius: .06rem;
}
.main .info_tap_title>div:nth-of-type(2)
    >div:nth-of-type(1) span:nth-of-type(1){
        color: rgb(41,204,177);
        height: .6rem;
        padding: 0 .15rem;
        background: rgba(41,204,177,.2);
}
.main .info_tap_title>div:nth-of-type(2)
    >div:nth-of-type(1) span:nth-of-type(2){
        color: rgb(41,204,177);
}


/* 下--内容展示区--授课师资 */
.main .teacher{
    width: 100%;
    /* height: 3rem; */
    /* 下边框 */
    border-bottom: 1px solid #e8e5e5;
}
/* 上-标题部分 */
.main .teacher>h2,
.main .class_list>h2{
    border-left: .04rem solid rgb(41,204,177);
    text-indent: .12rem;
    font-weight: bold;
    font-size: .36rem;
    margin: .2rem 0;
}

/* 授课师资-下 */
.main .teacher>div{
    width: 100%;
    /* 弹性盒模型 */
    display: flex;
    justify-content: space-between;
    height: 2rem;
}
/* 左侧 */
.main .teacher>div:nth-of-type(1) img{
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
}
/* 中间 */
.main .teacher>div>div:nth-of-type(2){
    flex-grow: 1;
    margin: 0 0 0 .4rem;
}
.main .teacher>div>div:nth-of-type(2)>h2{
    font-weight: bold;
}
.main .teacher>div>div:nth-of-type(2)>div{
    flex-grow: 1;
    font-size: .26rem;
    color: #666;
    margin-top: .12rem;
    display: flex;
    justify-content: space-between;
}
.main .teacher>div>div:nth-of-type(2)>div span u{
    /* 去除下划线 */
    text-decoration: none;
    color: rgb(41,204,177);
}
.main .teacher>div>div:nth-of-type(2)>div:nth-of-type(2){
    margin-top: .4rem;
    justify-content: flex-start;
}
.main .teacher>div>div:nth-of-type(2)
    >div:nth-of-type(2) span{
        color: rgb(41,204,177);
        background: rgba(41,204,177,.2);
        border-radius: .06rem;
        padding: .08rem .16rem;
        margin-right: .2rem;
    }
/* 右侧 */
.main .teacher>div>div:nth-of-type(3) button{
    border: 1px solid rgb(41,204,177);
    color: rgb(41,204,177);
    font-size: .26rem;
    background: #fff;
    padding: .06rem .15rem;
}


/* 课程目录 */
.main .class_list>h2{
    /* padding-bottom: .12rem; */
    /* 下边框 */
    border-bottom: 1px solid #e8e5e5;
    line-height: 1.8;
}
.main .class_list>ul{}
.main .class_list>ul>li{
    height: auto;/*自动--由子元素撑开*/
    border-bottom: 1px solid #e8e5e5;
}
/* 上--标题 */
.main .class_list>ul>li>div{
    height: 1.2rem;
    /* background: lightblue; */
    /* 弹性盒模型 */
    display: flex;
    align-items: center;
}
.main .class_list>ul>li>div i{
    font-size: .28rem;
    margin-right: .2rem;
}
/* 下--列表 */
.main .class_list>ul>li>ul{
    padding-left: .4rem;
}
/* 嵌套列表项 */
.main .class_list>ul>li>ul>li{
    height: 1.2rem;
    /* background: rgb(203, 230, 173); */
    display: flex;
    align-items: center;
    color: #888;
}
.main .class_list>ul>li>ul>li i{
    margin-right: .2rem;
    font-size: .3rem;
    transform: translateY(-0.2rem);
}
.main .class_list>ul>li>ul>li p:nth-of-type(2){
    /* color: #999; */
}
.main .class_list>ul>li>ul>li p button{
    padding: .04rem .08rem;
    border: 1px solid #e8e5e5;
    color: #999;
    font-size: .24rem;
    border-radius: .06rem;
    margin-left: .12rem;
    background: #fbfbfb;
}
/* 激活态 */
.main .class_list>ul>li>ul>li.active{
    color: rgb(41,204,177);
}
.main .class_list>ul>li>ul>li.active p button{
    color: rgb(41,204,177);
    background: rgba(41,204,177,.2);
    border-color: rgb(41,204,177);
}

/* 底部导航 */
.footer{
    width: 100%;
    height: 1.2rem;
    box-shadow: 0 -1px .06rem rgba(210,210,210,.1);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    background: #fff;
    display: flex;
}
.footer button{
    flex-grow: 1;
    border: none;
    font-size: .28rem;
}
.footer button:nth-of-type(1){
    background: #fff;
    border-top-left-radius: .4rem;
    color: rgb(41,204,177);
}
.footer button:nth-of-type(2),
.footer button:nth-of-type(3){
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}.footer button:nth-of-type(2){
    background: rgb(107, 235, 213);
    border-bottom-left-radius: .4rem;
}
.footer button:nth-of-type(3){
    background: rgb(41,204,177);
    border-top-right-radius: .4rem;
}